<template>
  <div class="single-data-form">
    <div class="form-row">
      <div class="form-item">
        <label>名称:</label>
        <a-input v-model:value="formData.name" placeholder="请输入名称" />
      </div>
      <div class="form-item">
        <label>排序:</label>
        <a-input-number v-model:value="formData.sort" placeholder="请输入排序" style="width: 100%" />
      </div>
      <div class="form-item">
        <label>备注:</label>
        <a-input v-model:value="formData.remark" placeholder="请输入备注" />
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from "vue";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({ name: "", sort: null, remark: "" })
  }
});

const emit = defineEmits(["update:modelValue"]);

const formData = ref({
  name: props.modelValue?.name || "",
  sort: props.modelValue?.sort || null,
  remark: props.modelValue?.remark || ""
});

// 监听表单数据变化，向父组件发送更新
watch(formData, (newValue) => {
  emit("update:modelValue", { ...newValue });
}, { deep: true });

// 监听props变化，但避免循环更新
watch(() => props.modelValue, (newValue) => {
  if (newValue && JSON.stringify(newValue) !== JSON.stringify(formData.value)) {
    formData.value = {
      name: newValue.name || "",
      sort: newValue.sort || null,
      remark: newValue.remark || ""
    };
  }
}, { deep: true });
</script>

<style lang="less" scoped>
.single-data-form {
  margin-bottom: 20px;
  
  .form-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    
    @media (max-width: 768px) {
      flex-direction: column;
      gap: 12px;
    }
  }
  
  .form-item {
    flex: 1;
    
    label {
      display: block;
      margin-bottom: 4px;
      font-weight: 500;
      color: #262626;
    }
  }
}
</style>